<template>
    <div class="report">
        <!-- <div class="add-report" @click="$router.push('/addReport')">上报</div> -->
        <Search  @searchAll="search" :isSearchAll="true" :isReport="true"></Search>
        <div class="content">
            <vue-better-scroll
                class="wrapper"
                ref="scrollqq"
                :scrollbar="scrollbarObj"
                :pullDownRefresh="pullDownRefreshObj"
                :pullUpLoad="pullUpLoadObj"
                :startY='parseInt(startY)'
                @pullingUp="onPullingUp"
                > 
                <noData v-if="!accpentlist.length"></noData>
                <div v-for="(item, index) in accpentlist" :key="index" class="item" @click="$router.push(`/addReport?id=${item.Id}`)">
                    <h3 class="time">{{item.FillInDate.substring(0,10)}} {{week(item.FillInDate)}}</h3>
                    <p class="name">{{item.userName}} <span>|</span> {{item.DepartName}}</p>
                    <div class="detail">
                        <div class="detail-item">
                            <p><span class="yel">{{item.FillInNum}}</span> 人</p>
                            <p>上报人数</p>
                        </div>
                        <div class="detail-item">
                            <p><span>{{item.AddDiagnosisNum}}</span> 人</p>
                            <p>新增确诊人数</p>
                        </div>
                        <div class="detail-item">
                            <p><span>{{item.AddSuspectedNum}}</span> 人</p>
                            <p>新增疑似人数</p>
                        </div>
                        <div class="detail-item">
                            <p><span>{{item.AddCureNum}}</span> 人</p>
                            <p class="bto-info">新增治愈人数</p>
                        </div>
                    </div>
                </div>
            </vue-better-scroll>
        </div>
        <myMenu></myMenu>
    </div>
</template>

<script>
import Search from '@commonComponents/search'
import VueBetterScroll from "vue2-better-scroll"
import myMenu from '@/commonComponents/menu'
import getWeek from '../../utils/week'
export default {
    name: 'report',
    data () {
        return {
            scrollbarObj: {fade: true},
            pullDownRefreshObj: false,
            pullUpLoadObj: {
            threshold: 0,
            txt: {
                more: "加载更多",
                noMore: "没有更多数据了"
            }
            },
            startY: 0,
            scrollToX: 0,
            scrollToY: 0,
            scrollToTime: 700,
            params: {
                pageIndex: 1,
                pageSize: 10,
                deptName: '',
                userName: '',
                departId: '',
                FillInDateStart: '',
                FillInDateEnd: ''
            },
            totalCount: 0,
            userInfo: {},
            accpentlist: []
        }
    },
    components: {
        Search,
        VueBetterScroll,
        myMenu
    },
    methods: {
        onPullingUp() {
            this.params.pageIndex++;
            this.getData();
        },
        getData () {
            this.$axiosAjax.GetReportList(this.params).then(res => {
                if (res.status == 200) {
                    this.totalCount = res.data.count
                    console.log(res);
                    let relist = res.data.data[0].data;
                    this.accpentlist = this.accpentlist.concat(relist);
                    let totalAllCount = res.data.count;
                    let resultCount = this.accpentlist.length;
                    if (parseInt(resultCount) < parseInt(totalAllCount)) {
                        this.$refs['scrollqq'].forceUpdate(true);
                    } else {
                        this.$refs['scrollqq'].forceUpdate(false);
                    }
                }
            })
        }, 
        week (date) {
            return getWeek(date)
        },
        search (item) {
            this.params.userName = item.name
            if (item.deptId) {
                this.params.departId = item.deptId
            } else {
                this.params.departId = this.userInfo.departId
            }
            this.params.pageIndex = 1
            this.accpentlist = []
            this.getData()
        }
    },
    created () {
        this.userInfo = JSON.parse(localStorage.getItem('registerInfo')) || {}
        this.params.departId = this.userInfo.departId
        // this.params.departId = '87993ae6-d8a6-48be-b3c3-560d22379e0c'
    },
    mounted () {
        this.getData()
    }
}
</script>

<style lang="less" scoped>
    .report {
        width: 100%;
        height: 100%;
        background-color: #EBEEF2;
        display: flex;
        flex-direction: column;
        .add-report {
            background-color: #2269FC;
            color: #fff;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            line-height: 60px;
            text-align: center;
            position: fixed;
            right: 15px;
            bottom: 15px;
            z-index: 100;
        }
        .content {
            margin-top: 15px;
            flex: 1;
            overflow-y: hidden;
            .item {
                width: 100%;
                font-size: 14px;
                height: 180px;
                border-bottom: 1px solid #f2f2f2;
                padding: 35px 25px;
                background-color: #fff;
                .time {
                    font-weight: bold;
                }
                .name {
                    color: #666;
                    margin-top: 10px;
                }
                .detail {
                    width: 100%;
                    display: flex;
                    margin-top: 20px;
                    justify-content: space-between;
                    .detail-item {
                        flex: 1;
                        font-size: 14px;
                        text-align: center;
                        p {
                            margin: 10px 0;
                            span {
                                color: #2269FC;
                            }
                            .yel {
                                color: #ff8a00;
                            }
                        }
                    }
                }
            }
        }
    }
</style>